<template>
	<view>
			<!--顶部区域-->
			<view class="smart-panel-head">
				<view class="smart-panel-head-title">text</view>
			</view>
			<!--主题-->
		<view class="smart-padding-wrap">
			<text space="ensp" class="text-space">A&nbsp;&emsp;B C \n</text>
			<text space="emsp" class="text-space">A&nbsp;&emsp;B C \n</text>
			<text space="nbsp" class="text-space">A&nbsp;&emsp;B C \n</text>
			<view class="text-box">
				<text selectable="true">{{ text }}</text>
			</view>
			<button type="primary" :disabled="!canAdd" @click="add">Add Line</button>
			<button type="warn" :disabled="!canRemove" @click="remove">Remove Line</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				texts: [
					'HBuilder,400万开发者选择的IDE',
					'HBuilderX,轻巧、急速、极客编辑器',
					'uni-app，终极跨平台方案',
					'HBuilder,400万开发者选择的IDE',
					'HBuilderX,轻巧、急速、极客编辑器',
					'uni-app，终极跨平台方案',
					'HBuilder,400万开发者选择的IDE',
					'HBuilderX,轻巧、急速、极客编辑器',
					'uni-app，终极跨平台方案',
					'......'
				],
				text: '',
				canAdd: true,
				canRemove: false,
				extraLine: []
			}
		},
		methods: {
			add: function(e){
				this.extraLine.push(this.texts[this.extraLine.length % 12]);
				this.text=this.extraLine.join('\n');
				this.canAdd=this.extraLine.length<12;
				this.canRemove=this.extraLine.length>0
			},
			remove: function(e){
				if(this.extraLine.length>0){
					this.extraLine.pop();
					this.text=this.extraLine.join('\n');
					this.canAdd=this.extraLine.length<12;
					this.canRemove=this.extraLine.length>0
				}
			}
		}
	}
</script>

<style>

</style>